<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易严选首页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* 父容器样式设置 */
        .container{
            /* width: 100%; */
            height: 6379px;
            margin: 0 auto;
            /* background-color: indianred; */
        }
        .w{
            width: 1090px;
            margin: 0 auto;
        }
        /* 头部样式 */
        .header{
            width: 100%;
            height: 176px;
        }
        /* 头部中的顶部样式 */
        .header .header1{
            width: 100%;
            height: 36px;
            background-color: #333333;
        }
        .header .header1>div{
            width: 1090px;
            height: 36px;
            margin: 0 auto;
            position: relative;
        }
        /* 顶部左侧样式 */
        .header .header1 div .header1-left{
            width: 328px;
            height: 36px;
            line-height: 36px;
            position: absolute;
            left: 0;
        }
        .header .header1 div .header1-left a{
            width: 300px;
            height: 36px;
            color: #CC9756;
            font-size: 12px;
            margin-left: 28px;
        }
        /* hover事件 */
        .header .header1 div .header1-left a:hover{
            color: white;
            text-decoration: none;
        }
        /* 顶部右边头标栏样式 */
        .header .header1 div .nav-r{
            width: 472px;
            height: 36px;
            line-height: 36px;
            color: #ccc;
            font-size: 12px;
            position: absolute;
            left: 624px;
            display: flex;
            justify-content: space-evenly;
            /* background-color: red; */
        }
        .header .header1 div .nav-r div:hover{
            color: white;
        }
        .header .header1 div .nav-r div .jiantou{
            background-image: url(./img/icon-header.webp);
            background-position: 0 -690px;
            background-color: #333;
            vertical-align: middle;
            height: 5px;
            width: 11px;
        }
        .header .header1 div .nav-r div i{
            height: 11px;
            width: 7px;
            background-image: url(./img/icon-header.webp);
            background-position: 0 0;
            display: inline-block;
            margin-right: 5px;
            background-color: white;
            
        }
        .header .header2{
            width: 100%;
            height: 140px;
            /* background-color:aqua; */
        }
        .header .header2 .bigDiv{
            width: 1090px;
            height: 140px;
            margin: 0 auto;
            position: relative;
            /* background-color: palevioletred; */
        }
        /* logo样式 */
        .header .header2 .bigDiv img{
            width: 200px;
            height: 52px;
            position: absolute;
            top: 25px;
        }
        /* 搜索框样式 */
        .header .header2 .bigDiv .search{
            width: 536px;
            height: 38px;
            position: absolute;
            top: 15px;
            left: 360px;
            /* background-color: white; */
        }
        .header .header2 .bigDiv i{
            display: inline-block;
        }
        .search input{
            width: 442px;
            height: 38px;
            line-height: 38px;
            border: 1px solid #CC9756;
            border-radius: 19px 0 0 19px;
            padding: 2px 0 2px 38px;
            box-sizing: border-box;
        }
        .search i{
            width: 19px;
            height: 19px;
            background-image: url(./img/icon-header.webp);
            background-position:0 -518px;
            position: absolute;
            top: 14px;
            left: 15px;
        }
        /* 搜索按钮样式 */
        .search .searchBtn{
            width: 90px;
            height: 38px;
            line-height: 38px;
            color: #fff;
            text-align: center;
            font-size: 16px;
            background-color: #CC9756;
            border-radius: 0 19px 19px 0;
            position: absolute;
            top:0px;
            left: 440px;
        }
        /* 购物车样式 */
        .header .header2 .bigDiv .car{
            width: 134px;
            height: 38px;
            position: absolute;
            top: 15px;
            right: 0;
            line-height: 38px;
            border: 1px solid #CC9756;
            border-radius: 19px;
            /* background-color: yellowgreen; */
        }
        .header .header2 .bigDiv .car:hover{
            background-color: gainsboro;
        }
        .car i:first-child{
            background-image: url(./img/icon-header.webp);
            background-position: 0 -148px;
            height: 18px;
            width: 18px;
            margin-left: 22px;
        }
        .car i:nth-child(3){
            background-image: url(./img/icon-header.webp);
            background-position: 0 -51px;
            height: 19px;
            width: 19px;
            text-align: center;
            position: absolute;
            top: 10px;
            left: 95px;
        }
        .car i:nth-child(4){
            color: white;
            position: absolute;
            top: 1px;
            left: 96px;
        }
        .car span{
            color: #CC9756;           
            font-size: 14px;
        }
        .header .header2 .bigDiv ul{
            width: 1090px;
            height: 30px;
            position: absolute;
            bottom: 2px;
            font-weight: 700;
            display: flex;
            justify-content: space-evenly;
            /* background-color: blue; */
        }
        .header .header2 .bigDiv ul li{
            margin-top: 2px;
            /* color: #CC9756; */
            /* border-bottom: 3px solid #CC9756; */
        }
        .header .header2 .bigDiv ul li:first-child{
            border-bottom: 3px solid #CC9756;
            color: #CC9756;
        }
        /* 菜单项的hover */
        .header .header2 .bigDiv ul li:hover{
            border-bottom: 3px solid #CC9756;
            color: #CC9756;
            /* text-decoration: underline; */
            /* 下划线的颜色 */
            /* text-decoration-color: #CC9756; */
            /* 下划线的粗细 */
            /* text-decoration-thickness: 3px; */
        }
        .header2{
            position: relative;
        }
        .secondMenu1{
            width: 1349px;
            height: 500px;
            background-color: bisque;
            color: black;
            position: absolute;
            top: 33px;
            left: -129px;
            z-index: 1;
            display: none;
        }
        /* 显示二级导航 */
        .header .header2 .bigDiv ul li:hover .secondMenu1{
            display: block;
        }
        .secondMenu2{
            width: 1200px;
            height: 500px;
            background-color: bisque;
            color: black;
            position: absolute;
            top: 33px;
            left: 50%;
            margin-left: -600px;
            z-index: 1;
            display: none;
        }
        .header .header2 .bigDiv ul li:hover .secondMenu2{
            display: block;
        }
        /* 滑动显示的头部菜单导航栏 */
        .headerMenu{
            width: 1349px;
            height: 50px;
            /* background-color: brown; */
            position: relative;
            /* 隐藏 */
            display: none;
            position: sticky;
            top: 0;
        }
        /* .headerMenu{
            /* 粘滞定位 */
            /* position: sticky;
            top: 0; */
            /* display: block; */
        /* } */
        .headerMenu div{
            width: 1090px;
            height: 50px;
            /* background-color: gold; */
            margin-left: -545px;
            left: 50%;  
            position: absolute;
            /* position: fixed; */
        }
        /* logo样式 */
        .headerMenu div img{
            width: 160px;
            height: 40px;
            position: absolute;
            top: 10px;
            left: 0;
        }
        .headerMenu div ul{
            width: 890px;
            height: 30px;
            background-color: honeydew;
            font-size: 14px;
            color: #333;
            font-weight: 700;
            position: absolute;
            top: 18px;
            right: 0;
            display: flex;
            justify-content: space-evenly;
        }
        .headerMenu div ul li:first-child{
            border-bottom: 3px solid #CC9756;
            color: #CC9756;
        }
        /* hover事件 */
        .headerMenu div ul li:hover{
            border-bottom: 3px solid #CC9756;
            color: #CC9756;
        }
        .headerMenu div ul li .secondMenu3{
            width: 1090px;
            height: 500px;
            /* background-color: indianred; */
            position: absolute;
            margin-left: -644px;
            top: 32px;
            left: 50%;
            display: none;
        }
        .headerMenu div ul li .secondMenu4{
            width: 1200px;
            height: 500px;
            /* background-color: indianred; */
            position: absolute;
            top: 32px;
            left: 286px;
            display: none;
        }
        /* 显示二级菜单 */
        .headerMenu div ul li:hover .secondMenu3{
            display: block;
        }
        .headerMenu div ul li:hover .secondMenu4{
            display: block;
        }


        /* 内容区样式 */
        .content{
            /* width: 1920px; */
            height: 5740px;
            margin: 0 auto;
            /* background-color: #F5F5F5; */
            /* background-color: gray; */
        }
        /* 图片区的样式 */
        .content .img{
            width: 1920px;
            height: 420px;
            margin: 0 auto;
            overflow: hidden;
        }
        .img ul{
            width: 3840px;
            height: 420px;
            /* 设置动画 */
            /* animation: swipe 5s linear infinite; */
        }
        .img ul li{
            width: 1920px;
            height: 420px;
            float: left;
        }
        .img ul li img{
            height: 420px;
            width: 1920px;
        }
        /* @keyframes swipe {
            from{
                margin-left: 0;
            }
            to{
                margin-left: -2000px;
            }
        } */
        /* .content .bigContent{
            width: 1349px;
            height: 5600px;
            margin: 10px auto;
        } */

        /* 新品首发的样式设置 */
        .content .new{
            /* width: 100%; */
            height: 510px;
            margin: 10px auto;
            background-color: white;
        }
        .new-header{
            width: 1090px;
            height: 28px;
            padding-bottom: 20px;
            margin: 0 auto;
            position: relative;
            /* background-color: slateblue; */
        }
        /* 左侧 */
        .new-header .n-h-l{
            width: 245px;
            height: 28px;
            /* display: flex;
            justify-content: space-evenly; */
            /* background-color: snow; */
        }
        .new-header .n-h-l a{
            color: black;
            font-size: 18px;
            text-decoration: none;
            float: left;
            line-height: 28px;
        }
        .new-header .n-h-l a:nth-child(2){
            font-size: 12px;
            color: #b4a078;
            margin: 0 30px;
            border-bottom: 2px solid #b4a078;
        }
        .new-header .n-h-l a:nth-child(3){
            font-size: 12px;
        }
        .new-header .n-h-l span{
            font-size: 14px;
            position: absolute;
            left: 125px;
            top: 2px;
        }
        /* 右侧 */
        .new-header .n-h-r{
            width: 100px;
            height: 28px;
            position: absolute;
            right: 0;
            bottom: 10px;
            /* background-color: snow; */
        }
        .new-header .n-h-r a{
            color: black;
            font-size: 12px;
            margin-left: 20px;
            text-decoration: none;
        }
        /* 四宫格样式 */
        .new-bot{
            width: 1090px;
            height: 462px;
            margin: 0 auto;
            background-color: white;
        }
        .new-bot>div{
            height: 364px;
            width: 265px;
            margin-right: 10px;
            float: left;
            position: relative;
            /* background-color: brown; */
        }
        .new-bot>div:last-child{
            margin-right: 0;
        }
        /* 四宫格图片样式 */
        .new-bot div img{
            width: 265px;
            height: 265px;
            margin-bottom: 8px;
            
            background-color: #fff;
        }
        
        
        .prom{
            width: 100%;
            height: 32px;
            background-color: #F38245;  
        }
        .new-bot div .prom{
            position: absolute;
            left: 0;
            top: 234px;
        }
        .prom>p{
            color: #fff;
            text-align: left;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            margin-left: 4px;
            position: absolute;
            top: 0px;
            left: 86px;
        }
        .prom div{
            width: 60px;
            height: 30px;
            padding: 0 10px;
            /* background-color: #ED6D2B; */
            color: white;
            font-size: 12px;
            /* border-top-left-radius: 3px; */
        }
        .prom div>p{
            font-size: 14px;
        }

        .bd{
            width: 265px;
            height: 91px;
            /* background-color: violet; */
        }
        .bd div{
            width: 60px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
            padding: 0 5px;
            background-color: #e36844;
            color: #fff;
            margin: 0 auto;
        }
        .bd h4{
            width: 166px;
            height: 40px;
            margin: 4px auto 8px;
            line-height: 20px;
            text-align: center;
        }
        .bd a{
            text-decoration: none;
            color: #333;
        }
        .bd p{
            width: 200px;
            height: 14px;
            text-align: center;
            padding: 1px 0 9px;
            font-size: 13px;
            line-height: 13px;
            color: #d4282d;
            margin: 0 auto;
            position: relative;
        }
        .bd span{
            color: #999;
            font-size: 12px;
            line-height: 12px;
            margin-left: 6px;
            text-decoration: line-through;
            position: relative;
            top: -28px;
            left: 152px;
        }

        /* 人气推荐 */
        .recommend{
            width: 100%;
            height: 668px;
            margin: 0 auto;
            padding: 60px 0;
            background-color: #F4F0EA;
        }
        /* 七宫格 */
        /* 父容器的样式设置 */
        .re-bot{
            width: 1090px;
            height: 570px;
            margin: 0 auto;
            /* background-color: aqua; */
        }
        /* 使用序选择器 拿到第一个div 进行样式的设置 */
        .re-bot>div:first-child{
            width: 390px;
            height: 570px;
            background-color: white;
            float: left;
            margin-left: 0;
        }
        
        .hd{
            width: 390px;
            height: 400px;
            margin-bottom: 18px;
            border-bottom: 1px solid #F4F0EA;
            position: relative;
        }
        .hd img{
            width: 320px;
            height: 320px;
            margin: 40px 35px;
            background-color: #fff;
            /* 过渡属性 */
            transition: width 1s linear, height 1s linear;
        }
        .hd img:hover{
            width: 330px;
            height: 330px;
        }
        .hd .prom{
            position: absolute;
            top: 369px;
            background-color: #e36844;
        }
        .re-bot .bd{
            width: 390px;
            height: 123px;   
        }
        .re-bot .bd span{
            position: relative;
            left: 210px;
        }
        /* 子元素的样式 */
        .re-bot>div{
            width: 223px;
            height: 280px;
            background-color: white;
            float: left;
            /* 左边外边距 */
            margin-left: 10px;
        }
        /* 选中后三个div子元素 */
        .re-bot>div:nth-child(n+5):nth-child(-n+7){
            /* background-color: chartreuse; */
            margin-top: 10px;
        }
        .re-bot>div:nth-child(n+2) img{
            width: 180px;
            height: 180px;
            margin: 0 21px;
            border-bottom: 1px solid #F4F0EA;
            /* 过渡属性 */
            transition: width 1s linear, height 1s linear;
        }
        .re-bot>div:nth-child(n+2) img:hover{
            width: 185px;
            height: 185px;
        }
        .re-bot>div:nth-child(n+2) .bd{
            width: 223px;
            height: 88px;
        }
        .re-bot>div:nth-child(n+2) .bd span{
            position: relative;
            left: 147px;
        }
        
        /* 一张图片+四格   居家生活*/
        .home{
            width: 100%;
            height: 789px;
            margin: 0 auto;
            background-color: #fff;
        }
        .same-header{
            width: 1090px;
            height: 338px;
            padding-bottom: 20px;
            margin: 30px auto 0;
            /* background-color: #fff; */
        }
        .left{
            float: left;
        }
        .right{
            width: 716px;
            height: 28px;
            /* background-color: #fff; */
            float: right;
            /* 开启flex布局 */
            display: flex;
            justify-content: space-evenly;
        }
        .right a:last-child{
            margin-left: 20px;
        }
        .same-header .left a:first-child{
            font-size: 18px;
        }
        .same-header a{
            font-size: 14px;
            color: black;
            text-decoration: none;
        }
        img{
            width: 1090px;
            height: 310px;
            margin: 0 auto;
        }
        /* 四宫格 */
        .si-ge{
            width: 1090px;
            height: 411px;
            margin: 0 auto;
            display: flex;
        }
        .si-ge div{
            width: 265px;
            height: 361px;
            margin: 0 10px 50px 0;
            position: relative;
            /* background-color: darkorange; */
        }
        .si-ge div:last-child{
            margin-right: 0;
        }
        .si-ge div img{
            width: 265px;
            height: 265px;
            background-color: #F4F4F4;
        }
        .si-ge div .bd{
            width: 265px;
            height: 91px;
            text-align: center;
        }
        .si-ge div .bd>div{
            width: 50px;
            height: 22px;
            margin: 0 auto;
            line-height: 20px;
            background-color: #e36844;
            padding: 0 5px;
            color: #fff;
        }
        .si-ge div .bd>h4{
            width: 166px;
            height: 40px;
            text-align: center;
            margin: 4px auto;
            line-height: 20px;
        }
        .si-ge div .bd>p{
            position: absolute;
            top: 70px;
            left: 10px;
        }
        .si-ge div .bd>span{
            line-height: 13px;
            height: 13px;
            color: #999;
            text-decoration: line-through;
            position: absolute;
            top: 72px;
            left: 134px;
        }

        /* 服饰鞋包 */
        .clothes{
            width: 100%;
            height: 789px;
            margin: 0 auto;
            background-color: #F4F0EA;
        }
        /* 美食酒水 */
        .food{
            width: 100%;
            height: 789px;
            margin: 0 auto;
            background-color: white;
        }

        /* 底部样式 */
        .footer{
            width: 100%;
            height: 600px;
            background-color: #333333;
            margin: 0 auto;
        }
        /* 底部的上边 */
        .footer1{
            width: 100%;
            height: 204px;
            padding-top: 60px;
            padding-bottom: 34px;
            background-color: white;
            margin: 0 auto;
        }
        .footer1 .one{
            width: 1090px;
            height: 204px;
            margin: 0 auto;
            display: flex;
            justify-content: space-evenly;
            background-color: #fff;
        }
        .one div{
            width: 363px;
            text-align: center;
            border-left: 1px solid #e9e9e9;
            /* background-color: lightcoral; */
        }
        .one div:first-child{
            border-left:0px;
        }
        .one div h4{
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 28px;
            line-height: 1;
        }
        .one>div>a{
            display: inline-block;
            width: 78px;
            height: 73px;
            font-size: 14px;
            background-color: #fff;
            padding-top: 25px;  
            text-decoration: none;   
            border: 1px solid #E8E8E8;       
        }
        .one div a .erji{
            display:inline-block;
            background-image: url(./img/icon-foot.webp);
            background-position: 0 -290px;
            height: 24px;
            width: 30px;
        }
        .one div a .z{
            width: 77px;
            height: 26px;
            margin-top: 10px;
            color: black;
        }
        .one>div>p{
            width: 288px;
            height: 108px;
            text-align: left;
            font-size: 12px;
            line-height: 18px;
            margin-bottom: 22px;
            display: inline-block;
        }
        .one div .us{
            width: 288px;
            height: 42px;
            padding: 0 37px;
            text-align: left;
            color: black;
        }
        .one div .us p{
            margin-right: 15px;
            margin-bottom: 0;
            font-size: 14px;
            line-height: 32px;
            float: left;
        }
        .one div .us a{
            display: inline-block;
            width: 32px;
            height: 32px;
            background-color: #fff;
        }
        .one div .us .wb{
            background-image: url(./img/icon-foot.webp);
            background-position: 0 -326px;
        }
        .one div .us .wx{
            background-image: url(./img/icon-foot.webp);
            background-position: 0 -428px;
        }
        .one div .us .dy{
            background-image: url(./img/icon-foot.webp);
            background-position: 0 -470px;
        }
        .one div .canvas{
            display: inline-block;
            width: 104px;
            height: 104px;
            background-image: url(./img/二维码.png);
        }
        .one>div>div{
            color: #b4a078;
            font-size: 12px;
            margin-top: 3px;
        }

        /* 底部的下边 */
        .footer2{
            width: 100%;
            height: 243px;
            padding-top: 37px;
            margin: 0 auto;
        }
        .footer2 .blackContent{
            width: 1090px;
            height: 204px;
            margin: 0 auto;
        }
        .blackContent .top{
            width: 1073px;
            height: 51px;
            margin-bottom: 30px;
            padding-left: 17px;
            display: flex;
            justify-content: space-between;
        }
        .blackContent .top div{
            width: 204px;
            height: 51px;
            color: #fff;
            font-size: 18px;
            line-height: 51px;
        }
        .blackContent .top div i{
            float: left;
            width: 50px;
            height: 50px;
            margin-right: 17px;
        }
        .blackContent .top div .one{
            background-image: url(./img/icon-foot.webp);
            background-position: 0 -134px;
        }
        .blackContent .top div .two{
            background-image: url(./img/icon-foot.webp);
            background-position: 0 -368px;
        }
        .blackContent .top div .three{
            background-image: url(./img/icon-foot.webp);
            background-position: 0 0;
        }
        .blackContent .top div .four{
            background-image: url(./img/icon-foot.webp);
            background-position: 0 -194px;
        }

        .blackContent .line{
            width: 1090px;
            height: 1px;
            margin-bottom: 20px;
            background-color: #4f4f4f;
        }
        .blackContent .bottom{
            width: 1090px;
            height: 147px;
            text-align: center;
            color: #999;
        }
        .blackContent .bottom div{
            width: 1090px;
            height: 18px;
            margin-bottom: 11px;
        }
        .bottom div a{
            text-decoration: none;
            color: #999;
            font-size: 12px;
        }
        .bottom p:nth-child(2){
            display: flex;
            justify-content: space-evenly;
            margin-bottom: 11px;
        }
        .bottom p{
            margin-bottom: 11px;
        }
        .bottom p a{
            text-decoration: none;
            color: #999;
            font-size: 12px;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <!-- 父容器 -->
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <div class="header1">
                <div>
                    <!-- 顶部左侧 -->
                    <div class="header1-left">
                        <a href="#">因事件（疫情、特大暴雨）影响，部分地区无法配送公告</a>
                    </div>
                    <!-- 顶部右侧头标 -->
                    <div class="nav-r">
                        <div>登录/注册</div>|
                        <div>我的订单</div>|
                        <div>会员</div>|
                        <div>甄选家</div>|
                        <div>企业采购
                            <i class="jiantou"></i>
                        </div>|
                        <div>客户服务
                            <i class="jiantou"></i>
                        </div>|
                        <div><i></i> APP</div>
                    </div>
                </div>
                
            </div>
            <div class="header2">
                <div class="bigDiv">
                    <!-- logo -->
                    <img src="./img/logo.png" alt="">
                    <!-- 搜索框 -->
                    <div class="search">
                        <i></i>
                        <input type="text">
                        <div class="searchBtn">搜索</div>
                    </div>
                    <!-- 购物车 -->
                    <div class="car">
                        <i></i>
                        <span>购物车</span>
                        <i></i><i>0</i>
                    </div>
                    <!-- 一级导航 -->
                    <ul>
                        <li>首页</li>
                        <li>居家生活
                            <!-- 二级导航 -->
                            <div class="secondMenu1">123123</div>
                        </li>
                        <li>服饰鞋包
                            <div class="secondMenu1">123123</div>
                        </li>
                        <li>美食酒水
                            <div class="secondMenu2">123123</div>
                        </li>
                        <li>个护清洁
                            <div class="secondMenu2">123123</div>
                        </li>
                        <li>母婴亲子
                            <div class="secondMenu2">123123</div>
                        </li>
                        <li>运动旅行
                            <div class="secondMenu1">123123</div>
                        </li>
                        <li>运动旅行</li>
                        <li>运动旅行</li><span style="margin-right: 10px;">|</span>
                        <li>运动旅行</li>
                        <li>运动旅行</li>
                    </ul>
                </div>
            </div>            
        </div>        
        <!-- 滑动显示的头部菜单导航栏 -->
        <div class="headerMenu">
            <div>
                <img src="./img/logo.png" alt="">
                <ul>
                    <li>首页</li>
                        <li>居家生活
                            <!-- 二级导航 -->
                            <div class="secondMenu3">123123</div>
                        </li>
                        <li>服饰鞋包
                            <div class="secondMenu4">123123</div>
                        </li>
                        <li>美食酒水
                            <div class="secondMenu3">123123</div>
                        </li>
                        <li>个护清洁
                            <div class="secondMenu3">123123</div>
                        </li>
                        <li>母婴亲子
                            <div class="secondMenu4">123123</div>
                        </li>
                        <li>运动旅行
                            <div class="secondMenu3">123123</div>
                        </li>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                </ul>
            </div>
        </div>
        <!-- 内容区 -->
        <div class="content">
            <div class="img"><ul>
                <li><img src="./img/img1.webp" alt=""></li>
                <li><img src="./img/img2.webp" alt=""></li>
                <li><img src="./img/img1.webp" alt=""></li>
                <li><img src="./img/img2.webp" alt=""></li>
                <li><img src="./img/img1.webp" alt=""></li>
            </ul></div>
            <div class="bigContent">
                <!-- 新品首发 -->
                <div class="new">
                    <div class="new-header">
                        <div class="n-h-l">
                            <a href="#"><h3>新品首发</h3></a>
                            <span>为你寻觅世间好物</span>
                        </div>
                        <div class="n-h-r"><a href="#">更多新品></a></div>
                    </div>
                    <!-- 四宫格 -->
                    <div class="new-bot">
                        <div>
                            <img src="./img/新品首发.webp" alt="">
                            
                            <div class="bd">
                                <div>99选9</div>
                                <h4><a href="#">可以吃的“冻干酥脆咖啡”，咖啡饼干340克</a></h4>
                                <p>￥19.9</p>
                            </div>
                        </div>
                        <div>
                            <img src="./img/新品首发.webp" alt="">
                            <div class="prom"><div>特价<br><p>￥16.9</p></div>
                                <p>正在抢购中</p>
                            </div>
                            <div class="bd">
                                <div>特价</div>
                                <h4><a href="#">蜂蜜般流心，大颗土耳其杏肉</a></h4>
                                <p>￥16.9</p><span>￥19</span>
                            </div>
                        </div>
                        <div>
                            <img src="./img/新品首发.webp" alt="">
                            
                            <div class="bd">
                                
                                <h4 style="padding-top:20px;"><a href="#">日本制造隅田川意式手&nbsp;&nbsp;冲特浓挂耳咖啡</a></h4>
                                <p>￥39.9</p>
                            </div>
                        </div>
                        <div>
                            <img src="./img/新品首发.webp" alt="">
                            <div class="prom"><div>新品尝鲜价<br><p>￥105</p></div>
                                <p>仅剩492件&nbsp;距结束3天</p>
                            </div>
                            <div class="bd">
                                <div>新品尝鲜价</div>
                                <h4><a href="#">可以吃的“冻干酥脆咖啡”，咖啡饼干340克</a></h4>
                                <p>￥105</p><span>￥139</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 人气推荐 -->
                <div class="recommend">
                    <div class="new-header">
                        <div class="n-h-l">
                            <a href="#"><h3>人气推荐</h3></a>
                            <a href="#">编辑推荐</a>
                            <a href="#">热销总榜</a>
                        </div>
                        <div class="n-h-r"><a href="#">更多推荐></a></div>
                    </div>
                    <!-- 七宫格 -->
                    <div class="re-bot">
                        <div>
                            <div class="hd">
                                <img src="./img/人气推荐1.webp" alt="">
                                <div class="prom"><div>每日抄底<br><p>￥17.9起</p></div>
                                <p>仅剩30件&nbsp;距结束21小时</p>
                            </div>
                            </div>
                            <div class="bd">
                                <div>每日抄底</div>
                                <h4 style="padding-top:20px;"><a href="#">口袋里的咖啡&nbsp;浓缩胶囊咖啡液&nbsp;微糖1袋</a></h4>
                                <p>￥17.9</p><span>￥21.8</span>
                            </div>
                        </div>
                        <div>
                            <img src="./img/人气推荐2.webp" alt="">
                            <div class="bd">
                                <div>99选9</div>
                                <h4><a href="#">红杏干</a></h4>
                                <p>￥20</p>
                            </div>
                        </div>
                        <div>
                            <img src="./img/人气推荐2.webp" alt="">
                            <div class="bd">
                                <div>99选9</div>
                                <h4><a href="#">红杏干</a></h4>
                                <p>￥20</p>
                            </div>
                        </div>
                        <div>
                            <img src="./img/人气推荐2.webp" alt="">
                            <div class="bd">
                                <div>99选9</div>
                                <h4><a href="#">红杏干</a></h4>
                                <p>￥20</p>
                            </div>
                        </div>
                        <div>
                            <img src="./img/人气推荐2.webp" alt="">
                            <div class="bd">
                                <div>99选9</div>
                                <h4><a href="#">红杏干</a></h4>
                                <p>￥20</p>
                            </div>
                        </div>
                        <div>
                            <img src="./img/人气推荐2.webp" alt="">
                            <div class="bd">
                                <div>99选9</div>
                                <h4><a href="#">红杏干</a></h4>
                                <p>￥20</p>
                            </div>
                        </div>
                        <div>
                            <img src="./img/人气推荐2.webp" alt="">
                            <div class="bd">
                                <div>99选9</div>
                                <h4><a href="#">红杏干</a></h4>
                                <p>￥20</p>
                            </div>
                        </div>
                    </div>                   
                </div>

                <!-- 一张图片+四格 -->
                <!-- 居家生活 -->
                <div class="home">
                    <div class="same-header">
                        <div class="left">
                            <a href="#"><h3>居家生活</h3></a>
                        </div>
                        <div class="right">
                            <a href="#">收纳家饰</a>/
                            <a href="#">好物精选</a>/
                            <a href="#">疫情防控</a>/
                            <a href="#">北欧原木</a>/
                            <a href="#">家庭医疗</a>/
                            <a href="#">餐厨爆款清单</a>/
                            <a href="#">厨房电器</a>
                            <a href="#">查看更多></a>
                        </div>
                        <img src="./img/居家生活1.webp" alt="">
                    </div>
                    
                        <!-- 四格 -->
                        <div class="si-ge">
                            <div>
                                <img src="./img/居家2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p><span>￥2199</span>
                                </div>
                            </div>
                            <div>
                                <img src="./img/居家2.webp" alt="">
                                <div class="bd">
                                    
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                            <div>
                                <img src="./img/居家2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥49</p><span>￥59</span>
                                </div>
                            </div>
                            <div>
                                <img src="./img/居家2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥15.9</p><span>￥19.9</span>
                                </div>
                            </div>
                        </div>
                </div>

                <!-- 服饰鞋包 -->
                <div class="clothes">
                    <div class="same-header">
                        <div class="left">
                            <a href="#"><h3>居家生活</h3></a>
                        </div>
                        <div class="right">
                            <a href="#">收纳家饰</a>/
                            <a href="#">好物精选</a>/
                            <a href="#">疫情防控</a>/
                            <a href="#">北欧原木</a>/
                            <a href="#">家庭医疗</a>/
                            <a href="#">餐厨爆款清单</a>/
                            <a href="#">厨房电器</a>
                            <a href="#">查看更多></a>
                        </div>
                        <img src="./img/服饰鞋包1.webp" alt="">
                        <!-- 四格 -->
                        <div class="si-ge">
                            <div>
                                <img src="./img/服饰2.webp" alt="">
                                <div class="bd">
                                    <div>奥莱特卖</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥109</p><span>￥199</span>
                                </div>
                            </div>
                            <div>
                                <img src="./img/服饰2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                            <div>
                                <img src="./img/服饰2.webp" alt="">
                                <div class="bd">
                                    
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                            <div>
                                <img src="./img/居家2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥195</p><span>￥299</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 美食酒水 -->
                <div class="food">
                    <div class="same-header">
                        <div class="left">
                            <a href="#"><h3>美食酒水</h3></a>
                        </div>
                        <div class="right">
                            <a href="#">收纳家饰</a>/
                            <a href="#">好物精选</a>/
                            <a href="#">疫情防控</a>/
                            <a href="#">北欧原木</a>/
                            <a href="#">家庭医疗</a>/
                            <a href="#">餐厨爆款清单</a>/
                            <a href="#">厨房电器</a>/
                            <a href="#">查看更多></a>
                        </div>
                        <img src="./img/美食酒水1.webp" alt="">
                        <!-- 四格 -->
                        <div class="si-ge">
                            <div>
                                <img src="./img/美食2.webp" alt="">
                                <div class="bd">
                                    
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p><span>￥2199</span>
                                </div>
                            </div>
                            <div>
                                <img src="./img/美食2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                            <div>
                                <img src="./img/美食2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                            <div>
                                <img src="./img/居家2.webp" alt="">
                                <div class="bd">
                                    
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="food">
                    <div class="same-header">
                        <div class="left">
                            <a href="#"><h3>美食酒水</h3></a>
                        </div>
                        <div class="right">
                            <a href="#">收纳家饰</a>/
                            <a href="#">好物精选</a>/
                            <a href="#">疫情防控</a>/
                            <a href="#">北欧原木</a>/
                            <a href="#">家庭医疗</a>/
                            <a href="#">餐厨爆款清单</a>/
                            <a href="#">厨房电器</a>/
                            <a href="#">查看更多></a>
                        </div>
                        <img src="./img/美食酒水1.webp" alt="">
                        <!-- 四格 -->
                        <div class="si-ge">
                            <div>
                                <img src="./img/美食2.webp" alt="">
                                <div class="bd">
                                    
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p><span>￥2199</span>
                                </div>
                            </div>
                            <div>
                                <img src="./img/美食2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                            <div>
                                <img src="./img/美食2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                            <div>
                                <img src="./img/居家2.webp" alt="">
                                <div class="bd">
                                    
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="food">
                    <div class="same-header">
                        <div class="left">
                            <a href="#"><h3>美食酒水</h3></a>
                        </div>
                        <div class="right">
                            <a href="#">收纳家饰</a>/
                            <a href="#">好物精选</a>/
                            <a href="#">疫情防控</a>/
                            <a href="#">北欧原木</a>/
                            <a href="#">家庭医疗</a>/
                            <a href="#">餐厨爆款清单</a>/
                            <a href="#">厨房电器</a>/
                            <a href="#">查看更多></a>
                        </div>
                        <img src="./img/美食酒水1.webp" alt="">
                        <!-- 四格 -->
                        <div class="si-ge">
                            <div>
                                <img src="./img/美食2.webp" alt="">
                                <div class="bd">
                                    
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p><span>￥2199</span>
                                </div>
                            </div>
                            <div>
                                <img src="./img/美食2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                            <div>
                                <img src="./img/美食2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                            <div>
                                <img src="./img/美食2.webp" alt="">
                                <div class="bd">
                                    <div>特价</div>
                                    <h4>AB面胶独立弹簧床垫&nbsp;升级款</h4>
                                    <p>￥1699</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>           
        </div>

        <!-- 底部 -->
        <div class="footer">
            <div class="footer1">
                <div class="one">
                    <div>
                        <h4>客户服务</h4>
                        <a href="#">
                            <div class="erji"></div>
                            <div class="z">在线客服</div>
                        </a>
                        <a href="#" style="margin-left: 30px;">
                            <div class="erji"></div>
                            <div class="z">在线客服</div>
                        </a>
                    </div>
                    <div>
                        <h4>何为网易严选</h4>
                        <p>网易严选是深受新中产喜爱的生活方式品牌, 为消费者提供一站式、全品类、全方位的美好生活解决方案。我们通过简约、实用、舒适的美学设计, 不断带来高品质灵感好物, 陪伴3000万新中产用户「活出自己喜欢的样子」, 共同倡导多元化的生活价值主张——每个人都可以把生活的选择权交还给自己。</p>
                        <div class="us">
                            <p>关注我们：</p>
                            <a href="#" class="wb"></a>
                            <a href="#" class="wx"></a>
                            <a href="#" class="dy"></a>
                        </div>
                    </div>
                    <div>
                        <h4>扫码下载严选APP</h4>
                        <div class="canvas"></div>
                        <div>下载领大额新人红包</div>
                    </div>
                </div>
            </div>
            <div class="footer2">
                <div class="blackContent">
                    <div class="top">
                        <div>
                            <i class="one"></i>
                            <span>网易自营电商</span>
                        </div>
                        <div>
                            <i class="two"></i>
                            <span>30天无忧退换货</span>
                        </div>
                        <div>
                            <i class="three"></i>
                            <span>满99元免邮费</span>
                        </div>
                        <div>
                            <i class="four"></i>
                            <span>品质保证</span>
                        </div>
                    </div>
                    <!-- 横线div -->
                    <div class="line"></div>
                    <div class="bottom">
                        <div>
                            <a href="#">关于我们</a>
                            <b style="margin: 0 13px;">|</b>
                            <a href="#">关于我们</a>
                            <b style="margin: 0 13px;">|</b>
                            <a href="#">关于我们</a>
                            <b style="margin: 0 13px;">|</b>
                            <a href="#">关于我们</a>
                            <b style="margin: 0 13px;">|</b>
                            <a href="#">关于我们</a>
                            <b style="margin: 0 13px;">|</b>
                            <a href="#">关于我们</a>
                            <b style="margin: 0 13px;">|</b>
                            <a href="#">关于我们</a>
                            <b style="margin: 0 13px;">|</b>
                            <a href="#">关于我们</a>
                            <b style="margin: 0 13px;">|</b>
                            <a href="#">关于我们</a>
                            <b style="margin: 0 13px;">|</b>
                            <a href="#">关于我们</a>
                        </div>
                        <p>
                            <a href="#">食品经营许可证：JY13301080111719</a>
                            <a href="#">出版物经营许可证：新出发滨字第0132号</a>
                            <a href="#">妙得ICP证号：ICP 证浙B2-20160106</a>
                            <a href="#">浙杭食药监械经营备20171029号</a>
                            <a href="#">营业执照</a>
                            <span style="font-size: 12px;">网易公司版权所有 © 1997-2021</span>
                        </p>
                        <p>
                            <a href="#">无线电发射设备销售备案：42202011096855</a>
                            <a href="#">（浙杭）网械企备字[2019]第00119号</a>
                            <a href="#">（粤）网械平台备字（2019）第00004号</a>
                            <a href="#">（粤）-非经营性-2016-0023</a>
                            <a href="#">进口冷链食品管理承诺书</a>
                        </p>
                        <p>
                            <a href="#">食品经营许可证：JY14207050007694</a>
                            <a href="#">浙江省网络食品销售第三方平台提供者备案：浙网食A33010009</a>
                            <a href="#">单用途商业预付卡备案证：330100AAC0024</a>
                        </p>
                        <p>
                            <a href="#">出版物网络交易平台服务经营备案：新出发浙备字第2021006号</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
            
    </div>
    </div>   

</body>
</html>